<template>
    <view>
        <!-- pages/list/ranking/ranking.wxml -->
        <view class="topbox">
            <cu-custom :isShowicon="true" :isBack="true">
                <view slot="backText">返回</view>
                <view slot="content">排行榜</view>
            </cu-custom>
        </view>

        <view class="pmbox flex align-end justify-center">
            <view class="pmitem" @tap="gotoPlay" :data-id="list[1].id">
                <view class="pmiconbox">
                    <image src="/static/images/phicon2.png" mode="widthFix"></image>
                </view>
                <view class="pmimg">
                    <image :src="list[1].vertical_cover" mode="heightFix"></image>
                </view>
                <view class="pmtitle text-cut text-bold text-black flex align-center justify-center">
                    {{ list[1].title }}
                </view>
            </view>
            <view class="pmitem margin-lr-sm" style="width: 240rpx" @tap="gotoPlay" :data-id="list[0].id">
                <view class="pmiconbox">
                    <image src="/static/images/pmicon1.png" mode="widthFix"></image>
                </view>
                <view class="pmimg" style="height: 360rpx">
                    <image :src="list[0].vertical_cover" mode="heightFix"></image>
                </view>
                <view class="pmtitle text-cut text-bold text-black flex align-center justify-center">
                    {{ list[0].title }}
                </view>
            </view>
            <view class="pmitem margin-lr-sm" style="width: 240rpx" @tap="gotoPlay" :data-id="list[2].id">
                <view class="pmiconbox">
                    <image src="/static/images/pmicon3.png" mode="widthFix"></image>
                </view>
                <view class="pmimg">
                    <image :src="list[2].vertical_cover" mode="heightFix"></image>
                </view>
                <view class="pmtitle text-cut text-bold text-black flex align-center justify-center">
                    {{ list[2].title }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/list/ranking/ranking.js
const _api = require('../../../utils/api.js');
const apiurl = require('../../../utils/apiurl/public.js');
export default {
    data() {
        return {
            list: [],
            id: '',
            vertical_cover: '',
            title: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getVideolist();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getVideolist() {
            //获取视频列表

            uni.showLoading({
                title: '数据加载中'
            });
            _api.get(apiurl.recom, {
                type: 'rank_recom'
            }).then((res) => {
                console.log(res);
                uni.hideLoading();
                if (res.data.code == 0) {
                    this.setData({
                        list: res.data.data
                    });
                }
            });
        },

        gotoPlay(e) {
            //跳转到播放页
            let id = e.currentTarget.dataset.id;
            let page = '/pages/play/play?id=' + id;
            // console.log(id);
            uni.navigateTo({
                url: page
            });
        }
    }
};
</script>
<style>
/* pages/list/ranking/ranking.wxss */
page {
    background: #ffffff;
    padding-bottom: 40rpx;
    padding-top: 160rpx;
}
.pmbox {
    height: 480rpx;
}
.pmitem {
    width: 210rpx;
    position: relative;
    margin-left: 10px;
}
.pmimg {
    height: 330rpx;
    box-shadow: rgba(0, 0, 0, 0.15) 0 0 10rpx;
    border-radius: 12rpx;
    overflow: hidden;
}
.pmimg image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pmtitle {
    height: 70rpx;
}
.pmiconbox {
    width: 80rpx;
    z-index: 1000;
    position: absolute;
    width: 100%;
    left: 0;
    top: -40rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pmiconbox image {
    width: 80rpx;
    display: block;
}
</style>
